<template>
  <div class="container" v-loading="loading">
    <div class="login">
      <h3 class="space-lt f-w-n loginTitle text-center fontsize-20 color-login">
        房屋管理平台
      </h3>
      <el-form
        class="form"
        :rules="rules"
        :model="loginData"
        ref="loginData"
        status-icon
        
      >
        <el-form-item class="m-t-50" prop="login_account">
          <el-input
            placeholder="请输入用户账号"
            prefix-icon="iconfont saimingtechlogin_user color-login"
            autofocus="true"
            v-model="loginData.login_account"
            clearable
            
          ></el-input>
        </el-form-item>
        <el-form-item class="m-t-50" prop="login_password">
          <el-input
            type="password"
            placeholder="请输入用户密码"
            prefix-icon="iconfont saimingtechlogin_lock color-login"
            v-model="loginData.login_password"
            clearable
            show-password
            
          ></el-input>
        </el-form-item>
        <el-form-item class="m-t-50" prop="login_code">
          <el-input
            placeholder="请输入验证码"
            prefix-icon="iconfont saimingtechlogin_test color-login"
            style="width: 170px"
            v-model="loginData.login_code"
            
          ></el-input>
          <!-- <span class="checkcode">验证码</span> -->
          <div class="code" @click="refreshCode">
            <s-identify :identifyCode="identifyCode"></s-identify>
          </div>
        </el-form-item>
      </el-form>

      <el-button
        type="primary"
        class="loginBtn space-lt fontsize-16"
        @click="login('loginData')"
        v-if="loginData != null">登录</el-button
      >
    </div>

    <footer>
      <p>Copyright(C)2010-2011</p>
      <p>Copyright(C)2010-2011</p>
      <p>Copyright(C)2010-2011</p>
    </footer>
  </div>
</template>
<script>
import SIdentify from '../components/identify' //不出数据 再次导入
export default {
  name: 'login',
  components: {
    //需要百度
    's-identify': SIdentify, //需要百度
  },
  data() {
    var validatePass = (rule, value, callback) => {
      const patt = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!patt.test(value)) {
        callback(new Error('请检查密码!'))
      } else {
        callback()
      }
    }
    var validateCode = (rule, value, callback) => {
      value = value.toString().toUpperCase()
      if (value != this.identifyCode) {
        callback(new Error('请输入正确的验证码'))
      } else {
        callback()
      }
    }
    return {
      identifyCodes: 'abcdefghijklmnopqrstuvwxyz1234567890',
      identifyCode: '',

      loginData: {
        login_account: '',
        login_password: '',
        login_code: '',
      },
      rules: {
        login_account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          {
            min: 11,
            max: 11,
            message: '检查手机号码是否正确',
            trigger: 'blur',
          },
        ],
        login_password: [{ validator: validatePass, trigger: 'blur' }],
        login_code: [
          { validator: validateCode, trigger: 'blur', min: 4, max: 4 },
        ],
        
      },
      loading: false
    }
  },
  methods: {
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ].toUpperCase()
      }
      console.log(this.identifyCode)
    },
    //登录  
    login(formName) {
      //通过 this.$refs[formName] 拿到表单的引用即表单的地址
       this.$refs[formName].validate(async valid => {
        if (valid) {
          this.loading = true;
          const res = await this.$http.post('/user_login/Login',{
            //百度await
             "login_account": this.loginData.login_account,
            "login_password": this.loginData.login_password//验证登录的post请求 正常来说 应该会回调promise对象 用.then的方法回调
          }); //正常来说请求一下     就在这里用.then  但是最终解决方案  得用await async  随意函数那里改了
          // console.log(res)
          
          if (res.status == 200) {
               //存储token 用来管理路由跳转
                // console.log(111) 
              //  sessionStorage.token = res.data.ResultList[0].Token;   错误方法
              //sessionStorage.token = res.ResultList[0].Token; 错误方法
              // window.sessionStorage.setItem("token",res.data.Token);
              //存储token
              sessionStorage.token = res.data.Token; 
              //存储用户名
              sessionStorage.setItem('username',res.data.user_name);
            //这里的state的数值是200但是我并没有登录成功  main.js中的baseURL接口的问题
           this.$message({
              message: '恭喜你，登录成功！',
              type: 'success'
            });
            
            this.loading = false;
            // 编程式导航进行跳转
            this.$router.push('/home') 
            
          }
        } else {
         this.$message.error('登陆失败');
          return false
        }
      })
    },
  },
  mounted() {
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
    // this.$refs.myfocus.focus()
  },
}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  min-width: 1280px;
  background: url('../assets/image/login_bg@2x.jpg') no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.login {
  width: 300px;
  height: 400px;
  padding: 50px 75px;
  background-color: #fff;
  position: absolute;
  top: 25%;
  right: 100px;
}
.loginBtn {
  margin-top: 15px;
  width: 100%;
  background-color: #2f41e7;
}

footer {
  width: 1280px;
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translate(-50%);
  color: #fff;
  font-size: 12px;
}
.form {
  position: relative;
}
.code {
  position: absolute;
  right: 0;
  top: 0;
  width: 110px;
  height: 42px;
  border: 1px solid red;
}
// .checkcode {
//   position: absolute;
//   right: 0;
//   top: 0;
//   width: 110px;
//   height: 42px;
//   background-color: red;
// }
</style>